<template>
  <div class="add-customer">
    <h2 class="text-2xl font-bold">添加客户</h2>

    <form @submit.prevent="addCustomer">
      <div class="form-group">
        <label for="companyName">公司名称：</label>
        <input type="text" id="companyName" v-model="newCustomer.companyName" required />
        <p v-if="errors.companyName" class="error-message">{{ errors.companyName }}</p>
      </div>

      <div class="form-group">
        <label for="contactName">联系人姓名：</label>
        <input type="text" id="contactName" v-model="newCustomer.contactName" required />
        <p v-if="errors.contactName" class="error-message">{{ errors.contactName }}</p>
      </div>

      <div class="form-group">
        <label for="contactInfo">联系方式：</label>
        <input type="text" id="contactInfo" v-model="newCustomer.contactInfo" required />
        <p v-if="errors.contactInfo" class="error-message">{{ errors.contactInfo }}</p>
      </div>

      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="newCustomer.password" required />
        <p v-if="errors.password" class="error-message">{{ errors.password }}</p>
      </div>

      <div class="form-actions">
        <button type="submit" :disabled="hasErrors">提交注册</button>
        <button type="button" @click="goBack" class="btn-back">返回列表</button>
      </div>
    </form>

    <p v-if="message" class="message" :class="{ 'error': isError }">{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'AddCustomer',
  data() {
    return {
      newCustomer: {
        companyName: '',
        contactName: '',
        contactInfo: '',
        password: ''
      },
      message: '',
      isError: false,
      errors: {
        companyName: '',
        contactName: '',
        contactInfo: '',
        password: ''
      }
    };
  },
  computed: {
    hasErrors() {
      return Object.values(this.errors).some(error => error !== '');
    }
  },
  methods: {
    validateForm() {
      let isValid = true;
      this.errors = {
        companyName: '',
        contactName: '',
        contactInfo: '',
        password: ''
      };

      // 验证公司名称
      if (!this.newCustomer.companyName.trim()) {
        this.errors.companyName = '公司名称不能为空';
        isValid = false;
      }

      // 验证联系人姓名
      if (!this.newCustomer.contactName.trim()) {
        this.errors.contactName = '联系人姓名不能为空';
        isValid = false;
      }

      // 验证联系方式
      if (!this.newCustomer.contactInfo.trim()) {
        this.errors.contactInfo = '联系方式不能为空';
        isValid = false;
      }
      else if (!/^1[3-9]\d{9}$/.test(this.newCustomer.contactInfo)) {
        this.errors.contactInfo = '请输入有效的手机号码';
        isValid = false;
      }

      // 验证密码
      if (!this.newCustomer.password.trim()) {
        this.errors.password = '密码不能为空';
        isValid = false;
      } else if (this.newCustomer.password.length < 6) {
        this.errors.password = '密码长度至少为6位';
        isValid = false;
      }

      return isValid;
    },
    async addCustomer() {
      if (!this.validateForm()) {
        return;
      }

      try {
        const response = await fetch('/auth/register/customer', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.newCustomer)
        });

        if (response.ok) {
          this.message = '客户添加成功';
          this.isError = false;
          this.newCustomer = {
            companyName: '',
            contactName: '',
            contactInfo: '',
            password: ''
          };
        } else {
          const errorData = await response.json();
          this.message = errorData.message || '添加失败，请检查信息后重试';
          this.isError = true;
        }
      } catch (error) {
        this.message = '网络错误，请稍后再试';
        this.isError = true;
        console.error('添加客户错误:', error);
      }
    },
    goBack() {
      window.history.back();
    }
  }
};
</script>

<style scoped>
.add-customer {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.error-message {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}

.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #369c6b;
}

.btn-back {
  margin-left: 0;
  text-decoration: none;
  color: #333;
  background-color: #eee;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-back:hover {
  background-color: #ddd;
}

.message {
  margin-top: 20px;
  font-weight: bold;
}

.message.error {
  color: red;
}

.message:not(.error) {
  color: green;
}
</style>